<template>
  <div>

  </div>
</template>

<script>

import {Circle} from 'maptalks';

export default {
  name: 'ctMapCircle',
  components: {},
  props: {
    circles: {
      type: Array,
      default() {
        return [];
      },
    },
    zIndex: {}
  },
  data: () => ({
    cArr: []
  }),
  mounted() {
    this.reRender()
  },
  methods: {
    reRender() {
      const vue = this;
      this.$nextTick(() => {
        const {firstLayer} = this.$parent;
        let map = new Map()
        this.circles.forEach(function (circle) {
          let circleIns = vue.createCircle(circle.point, circle.radius, circle.cSymbol)
          circleIns.circleId = circle.circleId
          circleIns.cType = circle.cType
          circleIns.addTo(firstLayer)
          map.set(circle.circleId, circleIns)
          vue.cArr.push(circleIns)
        })
        this.$emit('circleCompleted', map)
      });
    },
    createCircle(centerPoint, radius, symbol) {
      if (symbol) {
        return new Circle(centerPoint, radius, {zIndex: this.zIndex == null ? 0 : this.zIndex, symbol: symbol})
      } else {
        return new Circle(centerPoint, radius, {zIndex: this.zIndex == null ? 0 : this.zIndex})
      }
    },
  },
  watch: {
    circles: {
      immediate: false,
      handler: function (v) {
        if (this.cArr) {
          this.cArr.forEach(function (value) {
            value.remove()
          })
          this.cArr = []
        }
        this.reRender()
      },
    },
  },
};
</script>

